<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        {{ treeText }}-{{ treeValue }}
          <el-input
    v-model="filterText"
    class="w-60 mb-2"
    placeholder="关键字"
  />

  <el-tree
    ref="treeRef"
    style="max-width: 600px"
    class="filter-tree"
    :data="data"
    :props="defaultProps"
    default-expand-all
    :filter-node-method="filterNode"
    @node-click="nodeClick"
  />

      </el-aside>
       
      <el-aside width="200px">
       
        {{ value }}
  <el-cascader
      v-model="value"
      :options="options"
      :props="props" 
    />

      </el-aside>
    </el-container>
  </div>
</template>


<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { ElMessage, type FilterNodeMethodFunction, type TreeInstance } from 'element-plus'
import http from '@/http/axiosHelper';
import { el } from 'element-plus/es/locales.mjs';

interface Tree {
  [key: string]: any
}

const filterText = ref('')
const treeRef = ref<TreeInstance>()

const defaultProps = {
  children: 'children',
  label: 'areaName',
  id:'id'
}

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
  if (!value) return true
  return data.areaName.includes(value)
}

const treeText = ref('');
const treeValue= ref(0)
const data=ref([])
const getData=()=>{
    http.get("/T7/Area/GetAreaTree").then(res=>{
        data.value = res.data.data
    })
}

const nodeClick=(x:any)=>{

    treeText.value = x.areaName
    treeValue.value=x.id
    ElMessage.success("您在点击树形控件的节点"+x.areaName);
}

//级联
const value = ref(8)
const options= ref([])
const getOptions = ()=>{

     http.get("/T7/Area/GetAreaTree").then(res=>{
        options.value = res.data.data
    })
}
const props = {
    value:'id',
    label:'areaName',
    chindren:'chindren',
    checkStrictly:true,
    emitPath:false

};

//挂载函数是钩子生命周期函数之一
onMounted(()=>{
  getData();
  getOptions()
})
</script>
